<template>
  <div class="about">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-swipe-cell v-for="i in carts" :key="i.id">
        <van-checkbox v-model="i.checked"></van-checkbox>
        <van-card
          :price="i.product.price"
          :title="i.product.name"
          :thumb="i.product.coverImage"
        >
          <template #footer>
            <van-button
              size="small"
              @click="changeCartData(i, -1)"
              icon="minus"
              type="danger"
            ></van-button>
            <span>{{ i.amount }}</span>
            <van-button
              @click="changeCartData(i, 1)"
              size="small"
              icon="plus"
              type="danger"
            ></van-button>
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="delHandle(i.id)"
          />
        </template>
      </van-swipe-cell>
    </van-cell-group>

    <van-submit-bar
      :price="sumprice * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import { loadCarts, addToCart } from "../services/cart";
import { delteCart } from "../services/cart";
import { submitorder } from "../services/order";
export default {
  data() {
    return {
      carts: [],
      Ocount: [],
    };
  },
  async created() {
    // setTimeout(() => , 0);
    this.loadData();
  },
  methods: {
    // 调用数量改变的方法
    async loadData() {
      const res = await loadCarts();
      this.carts = res.data.map((item) => ({ ...item, checked: false }));
      console.log(this.carts);
    },
    async onSubmit() {
      this.carts
        .filter((item) => item.checked)
        .map((item) => {
          const product = item.product.id;
          const amount = item.amount;
          this.Ocount.push({ product, amount });
        });
      console.log(this.Ocount);
      const res = await submitorder(this.Ocount);
      console.log(res);
      this.$router.push({
        name: "Order",
      });
    },
    onClickEditAddress() {},
    onClickLeft() {
      window.history.go(-1);
    },

    async delHandle(id) {
      const res = await delteCart(id);
      this.loadData();
      console.log(res);
    },
    async changeCartData(p, q) {
      const endCount = p.amount + q;
      if (endCount > 0) {
        await addToCart(p.product.id, q);
        this.loadData();
      }
    },
  },

  computed: {
    checkedAll: {
      set(v) {
        this.carts.forEach((item) => (item.checked = v));
      },
      get() {
        return this.carts.every((item) => item.checked);
      },
    },
    sumprice() {
      return this.carts
        .filter((item) => item.checked)
        .reduce((pre, cur) => pre + cur.product.price * cur.amount, 0);
    },
  },
};
</script>
<style scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>
